<template>
  <div>
    <nav class="navbar navbar-expand-lg navbar-light bg-amos">
      <div class="container-fluid">
        <router-link class="navbar-brand" to="/index">医疗疫苗溯源</router-link>
        <!-- 头部栏 -->
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <router-link
                class="nav-link"
                active-class="active"
                aria-current="page"
                to="/index"
                >主页</router-link
              >
            </li>
            <li class="nav-item">
              <router-link class="nav-link" active-class="active" to="/checking"
                >疫苗查询溯源</router-link
              >
            </li>
            <li class="nav-item">
              <router-link class="nav-link" active-class="active" to="/hospital"
                >医院</router-link
              >
            </li>
            <li class="nav-item">
              <router-link class="nav-link" active-class="active" to="/factor"
                >疫苗制造方</router-link
              >
            </li>
            <li class="nav-item">
              <router-link class="nav-link" active-class="active" to="/store"
                >仓储企业</router-link
              >
            </li>
            <li class="nav-item">
              <router-link
                class="nav-link"
                active-class="active"
                to="/transtion"
                >运输企业</router-link
              >
            </li>
          </ul>
          <form class="d-flex">
            <input
              class="form-control me-2"
              type="search"
              placeholder="查询溯源疫苗"
              aria-label="Search"
            />
            <button class="btn btn-outline-success" type="submit">搜索</button>
          </form>
        </div>
      </div>
    </nav>
    <MyLinkPage/>
    <!-- 介绍卡 -->
    <MyCard/>
    <div class="container">
      <div class="row pt-5">
        <div class="col-md-12">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">查询溯源哈希</h5>
              <div class="input-group mb-3">
                <span class="input-group-text">疫苗工厂地址</span>
                <input
                  id="address"
                  type="text"
                  class="form-control"
                  placeholder="输入疫苗工厂地址"
                />
              </div>
              <div class="input-group mb-3">
                <span class="input-group-text">疫苗数组位置</span>
                <input
                  id="arrays"
                  type="text"
                  class="form-control"
                  placeholder="输入疫苗数组位置"
                />
              </div>
              <div class="input-group mb-3" v-if="isShow">
                <span class="input-group-text">溯源疫苗哈希</span>
                <input id="hashid" type="text" class="form-control" />
              </div>
              <button
                class="btn btn-primary"
                @click="_addrToIds"
                id="_addToIds"
                type="button"
              >
                查询溯源哈希
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <router-view></router-view>
    <MyFooter />
  </div>
</template>

<script>
import MyLinkPage from "./components/MyLinkPage.vue";
import MyFooter from "./components/MyFooter.vue";
import MyCard from './components/MyCard.vue'
export default {
  name: "App",
  components: { MyLinkPage, MyFooter, MyCard},
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    async _addrToIds() {
      this.isShow = !this.isShow;
      var address = $("#address").val();
      var arrays = $("#arrays").val();
      await this.$Appjs.methods
        ._addrToIds(address, parseInt(arrays))
        .call()
        .then(function (result) {
          console.log("result =", result);
          document.getElementById("hashid").value = result;
        });
      alert("查询成功");
    },
  },
};
</script>

<style scoped>
.bg-amos {
  background-color: #ccc;
}
</style>
